<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src='js/vue1.0.js'></script>
	<script type='text/javascript'>

			window.onload=function(){		
				  var vm=new Vue({
                      el:'#box',
                      data:{
              				
                      },
                      methods:{
                          show:function(ev){
                               console.log(ev);
                               alert(ev.keyCode);
                          },
                          show1:function(ev){
                               alert(2);
                               // 原生JS阻止默认事件
                               // ev.preventDefault();
                          },
                          show2:function(ev){
                              alert(3);
                              //原生JS阻止冒泡事件
                              // ev.cancelBubble=true;

                          }
                      }
                      
				  });

			}

	</script>
</head>
<body>
   <div id="box">
                   <!-- Vue事件对象 -->
           <input type="button" @click='show($event)' value="按钮">


                   <!-- 事件冒泡 --> 
          <div onclick='alert(1)' style="width: 200px;height: 200px;background: red">
            <div onclick="alert(2)" style="width: 100px;height: 100px;background: blue">
                <div onclick="alert(3)" style="width: 50px;height: 50px;background: black">ddd</div>
            </div>
          </div>

        <!-- 1: 冒泡事件 -->
                 <!-- 原生JS阻止冒泡事件  ev.cancelBubble=true-->       
                 <!--  Vue阻止冒泡事件    @click.stop="show2()"-->
          
            <div @click="show1()" style="width: 100px;height: 100px;background: blue">
                <div @click.stop="show2($event)" style="width: 50px;height: 50px;background: black;color:red">冒泡事件测试</div>
            </div>
            

        <!-- 2: 默认事件 -->

            <hr>
                <!-- 原生JS阻止默认事件   ev.preventDefault()-->       
                 <!--  Vue阻止默认事件    @click.prevent="show2()"-->
           <div @contextmenu.prevent="show1($event)" style="width: 100px;height: 100px;background: pink">默认事件测试</div>
  
            
        <!-- 1: 键盘事件 -->
            
             <hr>
             <input type="text" @keydown="show($event)">
             <input type="text" @keyup="show($event)">

       <!-- 检测回车键的两种方式，上、下、左、右同理 -->
                     <!--   1、   @keyup.13
                            2、   @keyup.enter 

                            3、   @keyup.up 
                            4、   @keyup.down 
                            5、   @keyup.left 
                            6、   @keyup.right

                            -->
                          

             <!-- <input type="text" @keyup.13="show($event)"> -->
             <!-- <input type="text" @keyup.enter="show($event)"> -->
             <!-- <input type="text" @keyup.up="show($event)"> -->
             <!-- <input type="text" @keyup.down="show($event)"> -->
             <!-- <input type="text" @keyup.left="show($event)"> -->
             <input type="text" @keyup.right="show($event)">

 


   </div>
</body>
</html>